<template>
    <div class="body">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加新图书</h3>
            </div>
            <form class="panel-body form-inline">
                <div class="input-group">
                    <div class="input-group-addon">书名</div>
                    <input
                        type="text"
                        class="form-control"
                        placeholder="请输入书名" v-model.trim="bookname"
                    />
                </div>

                <div class="input-group">
                    <div class="input-group-addon">作者</div>
                    <input
                        type="text"
                        class="form-control"
                        placeholder="请输入作者" v-model.trim="author"
                    />
                </div>

                <div class="input-group">
                    <div class="input-group-addon">出版社</div>
                    <input
                        type="text"
                        class="form-control"
                        placeholder="请输入出版社" v-model.trim="publisher"
                    />
                </div>

                <button class="btn btn-primary" @click.prevent="addFn">添加</button>
            </form>
        </div>

        <!-- 图书的表格 -->
        <table class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>出版社</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in list" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.bookname}}</td>
                    <td>{{item.author}}</td>
                    <td>{{item.publisher}}</td>
                    <td>
                        <a href="javascript:;" class="del"  @click="delFn(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
// todo axios 实现图书管理案例
//  安装 bootstrap  需要安装3的版本  yarn add bootstrap@3
//  导入 bootstrap的css文件美化样式

// 接口地址： https://www.showdoc.com.cn/1834761734600444/8449559255355128
import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios'
axios.defaults.baseURL='http://ajax-api.itheima.net'


export default {
    data() {
        return {
            list:[],
				bookname:'',
				author:'',
				publisher:'', 
        }
    },
    methods:{
        async getList(){
			 const {data:res}=	await axios.get('/api/books')
			 console.log(res.data);
			 this.list=res.data
			},
        async addFn(){
            await axios.post('/api/books',{
                bookname:this.bookname,
                author:this.author,
                publisher:this.publisher
            })
            this.getList()
				this.bookname=''
				this.author=''
				this.publisher=''
        },
        async	delFn(id){
				const{data:res}= await	axios.delete(`/api/books/${id}`)
				console.log(res);
				this.getList()
			},
    }
}
</script>

<style scoped>
.body {
    padding: 15px;
}
</style>
